<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
      <template slot="table-action">
        <el-button type="primary" icon="el-icon-plus" @click="saveOrUpdateDlvApply()">新增</el-button>
      </template>
    </table-ext>
  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import TableIcon from '@/components/common/table-ext/table-icon';
  import SelectTree from '@/components/common/select-ext/select-tree.vue';
  export default {
    // 引入自定义表格组件
    components: {
      'table-ext': TableExt,
      SelectTree,
    },
    data() {
      return {
        config: { // 页面共通配置
          title: '开发申请', //页面标题
          isPage: true, //是否分页
          isNo: false, //是否显示序号
          selection: true, //是否显示复选框
          crudMapping: { // CRUD方法
            query: {
              url: this.lib.config.host.vendorDlv + "/vendormgt/dlv/dlvApply/query"
            },
            delete: {
              url: this.lib.config.host.vendorDlv + "/vendormgt/dlv/dlvApply/delete",
            }
          }
        },
        // 查询表单配置
        searchForm: [{
          label: '采购组织：',
          key: 'purOrgId',
          type: 'select',
          dict: {
            url: this.lib.config.host.masterData + '/system/purOrgMgt/purOrg/getPurOrgByUserId/' + this.getCurrUserId(),
            method: 'get',
            label: 'purOrgName',
            value: 'id'
          }
        }, {
          label: '采购组：',
          key: 'purGroupId',
          type: 'select',
          dict: {
            url: this.lib.config.host.masterData + '/mdata/purOrgMgt/purGroup/getByPurOrgId/{purOrgId}',
            method: 'post',
            label: 'purGroupName',
            value: 'id'
          }
        }, {
          label: '申请主题：',
          key: 'title',
          type: 'input'
        }, {
          label: '品类:',
          key: 'categoryCode',
          type: 'select-tree'
        }, {
          label: '申请人:',
          key: 'applyUserName',
          type: 'input'
        }, {
          label: '申请开始时间:',
          key: 'applyDateStart',
          type: 'date'
        }, {
          label: '申请结束时间:',
          key: 'applyDateEnd',
          type: 'date'
        }, {
          label: '提交状态:',
          key: 'submitStatus',
          type: 'select',
          dict: [{
            value: '0',
            label: '未提交'
          }, {
            key: '1',
            label: '已提交'
          }]
        }, {
          label: '审核状态:',
          key: 'checkStatus',
          type: 'select',
          dict: [{
            value: '0',
            label: '未审核'
          }, {
            value: '1',
            label: '已审核'
          }, {
            value: '3',
            label: '待审核'
          }, {
            value: '4',
            label: '免审'
          }]
        }],
        // 表格列定义
        columns: [{
          label: '操作',
          width: '100',
          align: 'center',
          render: (createElement, params) => { // 动态渲染，click事件示例
            if (params.row.submitStatus != 1) {
              let _this = this;
              return createElement('div', {}, [createElement('el-button', {
                props: {
                  type: 'text',
                },
                on: {
                  click() {
                    _this.updateRow(params.row.id);
                  }
                }
              }, '编辑')]);
            } else {
              return createElement('div', '--')
            }
          }
        }, {
          label: '采购组织',
          key: 'purOrgName',
          width: '180',
          align: 'center',
        }, {
          label: '采购组',
          key: 'purGroupName',
          align: 'center',
        }, {
          label: '申请号',
          key: 'applyNo',
          align: 'center',
          width: '160',
          order: true,
          render: (createElement, params) => { // 动态渲染，click事件示例
            let _this = this;
            return createElement('div', {}, [createElement('a', {
              style: {
                color: '#409EFF',
                cursor: 'pointer'
              },
              on: {
                click() {
                  _this.toView(params.row.id);
                }
              }
            }, params.row.applyNo)]);
          }
        }, {
          label: '申请主题',
          key: 'title',
          width: '200',
          align: 'center',
        }, {
          label: '申请人',
          key: 'applyUserName',
          width: '150',
          align: 'center',
        }, {
          label: '申请时间',
          key: 'applyTime',
          width: '180',
          align: 'center',
        }, {
          label: '品类名称',
          key: 'categoryName',
          align: 'center',
          width: '200',
        }, {
          label: '提交状态',
          key: 'submitStatus',
          width: '80',
          align: 'center',
          render: (createElement, params) => { //动态渲染, 字典表示例
            return createElement(TableIcon, {
              props: {
                flag: params.row.submitStatus,
                titles: [{
                  status: 0,
                  title: '未提交'
                }, {
                  status: 1,
                  title: '已提交'
                }]
              }
            });
          }
        }, {
          label: '审核状态',
          key: 'checkStatus',
          width: '80',
          align: 'center',
          render: (createElement, params) => { //动态渲染, 字典表示例
            return createElement(TableIcon, {
              props: {
                flag: params.row.checkStatus,
                titles: [{
                  status: 0,
                  title: '未审核'
                }, {
                  status: 1,
                  title: '已审核'
                }, {
                  status: 3,
                  title: '待审核'
                }, {
                  status: 4,
                  title: '免审核'
                }, {
                  status: -1,
                  title: '驳回'
                }]
              }
            });
          }
        }]
      };
    },
    created() {
      if (this.$route.query) {
        this.config.crudMapping.query.data = this.$route.query;
      }
    },
    methods: {
      // 新增或修改采购申请
      saveOrUpdateDlvApply() {
        this.$router.push('/Index/VendorDlv/SaveOrUpdateDlvApply');
      },
      //点击编码 跳转到视图页面
      updateRow(id) {
        this.$router.push('/Index/VendorDlv/SaveOrUpdateDlvApply?dlvApplyId=' + id);
      },
      //点击编码 跳转到视图页面
      toView(id) {
        window.open('/DlvApplyView?dlvApplyId=' + id)
      },
    }
  }

</script>
